<template>
  <div>
    <x-header :title="title"></x-header>
    <group label-width="5em" label-margin-right="0.8em" label-align="right" gutter="0">
      <cell title="学生姓名:" :value="info.studentName" value-align="left"></cell>
      <cell title="姓名拼音:" :value="info.pinYin" value-align="left"></cell>
      <cell title="证件类型:" :value="info.idType" value-align="left"></cell>
      <cell title="证件编号:" :value="info.idNo" value-align="left"></cell>
      <cell title="国籍:" :value="info.country" value-align="left"></cell>
      <cell title="名族:" :value="info.nation" value-align="left"></cell>
      <cell title="出生年月:" :value="info.birth" value-align="left"></cell>
      <cell title="性别:" :value="info.sex" value-align="left"></cell>
      <cell title="考试科目:" :value="info.subjectName" value-align="left"></cell>
      <cell title="考试等级:" :value="info.leavelName" value-align="left"></cell>
      <cell title="指导老师:" :value="info.teacher" value-align="left"></cell>
      <cell title="考试日期:" :value="info.examDay" value-align="left"></cell>
      <cell title="考试地点:" :value="info.examAddress" value-align="left" primary="content"></cell>
      <cell v-if="amount != 0" title="考试费用:" value-align="left" primary="content">
        <span class="amount" v-html="priceAmount"></span>
      </cell>
      <cell v-if="amount == 0" title="考试费用:" value-align="left">
        <span class="amount">{{info.orderAmount + '元'}}</span>
      </cell>
    </group>
    <span class="notice">{{notice}}</span>
    <x-button class="button" type="primary" @click.native="beforeToPay" :disabled="isDisabled">支付</x-button>
    <x-button class="button" type="primary" :disabled="isDisabled" link="BACK">返回修改</x-button>
  </div>
</template>
<script>
import { XHeader, Group, Cell, XButton, Flexbox, FlexboxItem } from "vux";
export default {
  components: {
    XHeader,
    Group,
    Cell,
    XButton,
    Flexbox,
    FlexboxItem
  },
  data() {
    return {
      title: "考试报名支付",
      info: {
        studentName: "",
        pinYin: "",
        idType: "",
        idNo: "",
        country: "",
        nation: "",
        birth: "",
        sex: "",
        mobile: "",
        subjectName: "",
        leavelName: "",
        teacher: "",
        examDay: "",
        examAddress: "",
        realAmount: "",
        orderAmount: "",
        paymentFee: "",
        paymentStatus: "",
        isDeleted: ""
      },
      amount: "",
      priceAmount: "",
      notice: "",
      id: ""
    };
  },
  computed: {
    isDisabled: function() {
      return (
        this.info.paymentStatus != 1 ||
        this.info.orderAmount != this.info.paymentFee ||
        this.info.isDeleted == 1
      );
    }
  },
  created: function() {
    const vm = this;
    vm.id = vm.$route.params.id;
    vm.getDtOrdersToPay();
    vm.getAmount();
    vm.getNotice();
  },
  methods: {
    getDtOrdersToPay: function() {
      const vm = this;
      this.$api
        .getDtOrdersToPay({ id: vm.id })
        .then(response => {
          if (response) {
            vm.info = response;
            if (vm.info.orderAmount != vm.info.paymentFee) {
              this.$vux.confirm.show({
                content: "该订单价格与报考级别不符合，请重新下单!",
                showCancelButton: false,
                onConfirm() {
                  vm.$router.push("/Apply");
                }
              });
            } else if (vm.info.isDeleted == 1) {
              this.$vux.confirm.show({
                content: "该订单已经删除，请重新下单!",
                showCancelButton: false,
                onConfirm() {
                  vm.$router.push("/Apply");
                }
              });
            }
            vm.priceAmount =
              "在线优惠价" +
              vm.info.realAmount +
              "元<br>原价" +
              vm.info.orderAmount +
              "元";
          } else {
            this.$vux.confirm.show({
              content: "报名不存在",
              showCancelButton: false,
              onConfirm() {
                vm.$router.push("/Apply");
              }
            });
            return;
          }
        })
        .catch(err => {
          console.log("出错了" + err);
        });
    },
    getAmount: function() {
      const vm = this;
      this.$api
        .getParameter(2)
        .then(response => {
          vm.amount = response.value;
        })
        .catch(err => {
          console.log("出错了" + err);
        });
    },
    getNotice: function() {
      const vm = this;
      this.$api
        .getParameter(9)
        .then(response => {
          vm.notice = response.value;
        })
        .catch(err => {
          console.log("出错了" + err);
        });
    },
    beforeToPay: function() {
      const vm = this;
      let data = {
        id: vm.id,
        batchId: vm.$store.getters.batchId
      }
      this.$api
        .beforeToPay(data)
        .then(response => {
          if (!response) {
              this.$vux.confirm.show({
                content: "订单已过期或无法支付，请重新下单",
                showCancelButton: false,
                onConfirm() {
                  vm.$router.push("/Apply");
                }
              });
          } else {
            let params = {
              payType: "1",
              outTradeNo: response.tradeNo,
              totalFee: vm.info.realAmount,
              body:"欧洲美术等级考试:" + vm.info.subjectName + "(" +vm.info.leavelName + ")报名费"
            }
            this.$bridge.callhandler('payModel', params, (data) => {
              if(data.result == 0) {
                vm.$router.push({ name: 'PaySuccess', params: { tradeNo: response.tradeNo, content: params.body}});
              } else {
                vm.$vux.alert.show({
                  content: "支付失败，请重新支付！"
                });
              }
            })
          }
        })
        .catch(err => {
          console.log("出错了" + err);
        });
    },
  }
};
</script>
<style scoped>
.button {
  margin-top: 15px;
  margin-bottom: 10px;
  width: 80%;
}
.amount {
  color: #1850eb;
  font-size: 20px;
}
.notice {
  margin-left: 10%;
  font-size: 12px;
  color: Red;
}
</style>
